<template>
  <div class="container">
    <!-- 路径导航区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>收费标准</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索区域 -->
    <el-row>
      <el-form :inline="true">
        <el-form-item label="收费类型">
          <el-input v-model="queryInfo.chargeType" clearable @clear="queryList" placeholder="请输
入收费类型"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="queryList">搜索</el-button>
          <el-button type="primary" @click="toAddArticle">新增</el-button>
          <el-button type="danger" @click="toRemoveBatchById">批量删除</el-button>

        </el-form-item>
      </el-form>
    </el-row>
    <!-- 表格区域 -->
    <el-table :data="chargeList" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="chargeType" label="收费类型"></el-table-column>
      <el-table-column prop="chargePrice" label="收费价格"></el-table-column>
      <el-table-column prop="countNumber" label="咨询人数"></el-table-column>
      <el-table-column prop="teacherId" label="咨询师id"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope='scope'>
          <el-link type="primary" @click="toEditPublicity(scope.row)">编辑</el-link>
          <el-link type="primary" @click="deletePublicity(scope.row.id)">删除</el-link> </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="queryInfo.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="queryInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>


    <!-- 新增和修改的对话框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancle">
      <el-form :model="charge">
        <el-form-item label="收费类型" label-width="80px">
          <el-input placeholder="请输入收费类型" v-model="charge.chargeType"></el-input>
        </el-form-item>

        <el-form-item label="收费价格" label-width="80px">
          <el-input placeholder="请输入收费价格" v-model="charge.chargePrice"></el-input>
        </el-form-item>

        <el-form-item label="咨询人数" label-width="80px">
          <el-input placeholder="请输入咨询人数" v-model="charge.countNumber"></el-input>
        </el-form-item>

        <el-form-item label="咨询师id" label-width="80px">
          <el-input placeholder="请输入咨询师id" v-model="charge.teacherId"></el-input>
        </el-form-item>

        <!-- <el-form-item label="文章图片" label-width="80px"> -->
        <!-- <el-input placeholder="请输入文章图片" v-model="article.tabularChart"></el-input> -->
        <!-- 
				 el-upload:上传组件
					action： 上传网址
					list-type：上传组件类型
					on-preview ： 图片预览事件
					on-remove ：移除图片事件
					
				el-dialog : 预览图片组件
				 -->
        <!-- <el-upload action="http://localhost:8080/sfzt_ssm/upload" list-type="picture-card" :file-list="fileList"
						:on-success="handleSuccess" :limit="1" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>


				</el-form-item> -->


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="addPublicity">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
export default {
  data() {
    return {
      removeBatch: [],  //批量删除存储的数据
      removeBatchId: [],//批量删除存储的id值
      // 查询信息对象
      queryInfo: {
        "id": null,
        "chargeType": "",
        "chargePrice": "",
        "countNumber": 0,
        "teacherId": null
      },
      total: 183,
      chargeList: [],
      title: '', // 对话框标题
      dialogFormVisible: false, // 是否显示对话框
      charge: { // 文章对象
        "id": null,
        "chargeType": "",
        "chargePrice": "",
        "countNumber": 0,
        "teacherId": null
      },
    }
  },
  mounted() {
    this.queryList();
  },
  methods: {
    //批量删除文章
    // 表格中的多选框，改变时触发的函数
    handleSelectionChange(val) {
      this.removeBatch = val;
      // console.log("111@"+this.removeBatch.length)
    },
    toRemoveBatchById() {
      for (let it of this.removeBatch) {
        this.removeBatchId.push(it.id)
      }
      // console.log("222@"+this.removeBatchId.length)

      this.$confirm('确定要批量删除这些文章吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          //链接后端接口，根据id数组批量删除文章
          this.$http.delete('charge/removeBatch?ids=' + this.removeBatchId)
            .then((resp) => {
              if (resp.data.status == 200) {
                this.$message.success("删除成功!")
                // 删除完重新查询
                this.queryList()
              } else {
                this.$message.error('接口异常！')
              }
            })

        })

        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })

    },

    // 删除
    deletePublicity(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http.delete('charge/remove/' + id)
            .then(resp => {
              if (resp.data.status == 200) {
                this.$message.success(resp.message)
                this.queryList()
              } else {
                this.$message.error(resp.message)
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 处理上传成功的函数
    handleSuccess(response) {
      console.log(response)
      // 把上传后的图片路径，交给文章对象的tabularChart
      // 	this.article.tabularChart = response.data;
      // },
      // // 删除图片的事件
      // handleRemove(file, fileList) {
      // 	console.log(file, fileList);
      // 	// 移除数据
      // 	this.article.tabularChart = '';
      // },
      // // 预览图片事件
      // handlePictureCardPreview(file) {
      // 	this.dialogImageUrl = file.url;
      // 	this.dialogVisible = true;
    },

    // 取消对话框
    cancle() {
      this.dialogFormVisible = false;
      this.charge = { // 文章对象
        "id": null,
        "chargeType": "",
        "chargePrice": "",
        "countNumber": 0,
        "teacherId": null
      }
      //	this.fileList = []
    },
    // 进入修改的预览数据页面
    toEditPublicity(row) {
      //console.log(row)
      // 赋值
      this.charge = row;
      // 设置标题
      this.title = "修改公告";
      // 开启对话框
      this.dialogFormVisible = true;
      // 动态的获取图片的名称并帮到到fileList
      // this.fileList = [{
      // 	name: row.tabularChart,
      // 	url: 'http://localhost:8080/sfzt_ssm/yuLan?filename=' + row.tabularChart
      // }];
    },
    // 添加文章
    addPublicity() {
      if (this.charge.id) { // 有值为true  修改
        this.$http.put("charge/edit", this.charge)
          .then(resp => {
            if (resp.data.status == 200) {
              // 消息提示
              this.$message.success('修改成功！');
              // 清空数据
              this.charge = { // 文章对象
                "id": null,
                "chargeType": "",
                "chargePrice": "",
                "countNumber": 0,
                "teacherId": null
              }
              // 关闭对话框
              this.dialogFormVisible = false;
              // 重新查询
              this.queryList()
              //	this.fileList = []
            } else {
              this.$message.error('接口异常！')
            }
          })

      } else {
        this.$http.post("charge/add", this.charge)
          .then(resp => {
            if (resp.data.status == 200) {
              // 消息提示
              this.$message.success('添加成功！');
              // 清空数据
              this.charge = { // 文章对象
                "id": null,
                "chargeType": "",
                "chargePrice": "",
                "countNumber": 0,
                "teacherId": null
              }
              // 关闭对话框
              this.dialogFormVisible = false;
              // 重新查询
              this.queryList()
              //	this.fileList = []
            } else {
              this.$message.error('接口异常！')
            }
          })
      }
    },
    // 进入添加的对话框
    toAddArticle() {
      this.title = "新增文章";
      this.dialogFormVisible = true;
      // 把当前登录的用户的id赋值为文章的teacher_id
      // this.article.teacherId = sessionStorage.getItem('userid');
    },
    // 分页查询信息的方法
    queryList() {
      // 调用后端接口来获取数据
      this.$http.get('charge/find', {
        params: this.queryInfo
      })
        .then(resp => {
          if (resp.data.status == 200) {
            console.log(resp.data)
            this.chargeList = resp.data.data.list;
            this.total = resp.data.data.total;
            console.log(this.chargeList)
          } else {
            this.$message.error('查询失败！')
          }
        })
    },

    handleSizeChange(size) {
      //console.log('每页显示数量发生改变');
      this.queryInfo.pageSize = size;
      this.queryInfo.pageNum = 1;
      // 重新查询
      this.queryList()
    },
    handleCurrentChange(num) {
      //console.log('页码发生改变');
      this.queryInfo.pageNum = num;
      // 重新查询
      this.queryList();
    }
  }
}
</script>
<style>
.el-breadcrumb {
  margin-bottom: 15px;
  padding: 0 0 15px;
  border-bottom: 1px solid #ddd;
}

.el-pagination {
  margin-top: 15px;
}

.el-link {
  padding: 0 5px;
}

/**设置富文本编辑器的最小高度，注意style中不能使用scoped **/
.ql-container {
  min-height: 200px;
}
</style>